<template>
  <div class="base-info">
    <Spin v-if="showSpin" size="large" fix></Spin>
    <el-card shadow="never" class="header-title box-card">
      <el-row type="flex" justify="center">
        <a class="goods-title">商品类目</a>
        <a>{{ formData.currentCategoryStr }}</a>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>商品架构信息</span>
      </div>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form ref="formData" :model="formData" label-width="130px">
            <el-form-item label="商品类型：">
              <span>{{
                formData.arch ? formData.arch.productTypeStr : ""
              }}</span>
            </el-form-item>
            <el-form-item label="集散地：">
              <span>{{ formData.arch ? formData.arch.disCentre : "" }}</span>
            </el-form-item>
            <el-form-item label="是否集采：">
              <span>{{
                formData.arch ? formData.arch.centralBuyStateStr : ""
              }}</span>
            </el-form-item>
            <el-form-item label="品牌：">
              {{ formData.arch ? formData.arch.brandName : "" }}
              <span class="sec-title">系列：</span>
              {{ formData.arch ? formData.arch.brandseries : "" }}
            </el-form-item>
            <el-form-item label="商品名称：">
              {{ formData.arch ? formData.arch.brandName : "" }}
              <span style="color: #666666; margin-left: 20px"></span>
              {{ formData.arch ? formData.arch.productName : "" }}
              <span class="sec-title">名称是否包含品牌：</span>
              {{
                formData.arch
                  ? formData.arch.productNameType == 1
                    ? "是"
                    : "否"
                  : ""
              }}
            </el-form-item>
            <el-form-item label="商品关键词：">
              {{ getKeywordInfo().keywordName }}
            </el-form-item>
            <el-form-item label="别名：">
              <ul class="keyword_ul_wrap">
                <li
                  v-for="(item, index) in getKeywordInfo().aliasInfoList"
                  :key="index"
                >
                  {{ item.aliasName }}
                </li>
              </ul>
            </el-form-item>
            <el-form-item label="助记码：">
              {{ formData.arch ? formData.arch.helpCode : "" }}
            </el-form-item>
            <el-form-item label="副标题：">
              {{ formData.arch ? formData.arch.subtitle : "" }}
            </el-form-item>
            <el-form-item label="加价类型：">
              {{ formData.arch ? formData.arch.addPriceTypeStr : "" }}
            </el-form-item>
            <el-form-item label="是否采销多计量：">
              {{ formData.arch ? formData.arch.isSaleMultiUnitStr : "" }}
            </el-form-item>
            <el-form-item label="是否采购多计量：">
              {{ formData.arch ? formData.arch.isPurchaseMultiUnitStr : "" }}
            </el-form-item>
            <el-form-item label="主计量单位：">
              {{ formData.arch ? formData.arch.mainUnitName : "" }}
              <span class="sec-title">主计量单位小数位：</span>
              {{ formData.arch ? formData.arch.mainUnitDecimals : "" }}
            </el-form-item>
            <el-form-item label="辅计量单位：">
              {{ formData.arch ? formData.arch.assistUnitName : "" }}
              <span class="sec-title">辅计量单位小数位：</span>
              {{ formData.arch ? formData.arch.assistUnitDecimals : "" }}
            </el-form-item>
            <el-form-item label="标签：">
              {{ formData.arch ? formData.arch.tagName : "" }}
            </el-form-item>
            <el-form-item label="知识库：">
              {{ formData.arch ? formData.arch.knowledgeName : "" }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>销售属性</span>
      </div>
      <el-row v-for="(item, index) in formData.specList" :key="index">
        <el-col>
          <span style="color: #666666; margin-right: 20px">{{
            item.attributeName
          }}</span>
        </el-col>
        <el-col
          :span="8"
          style="display: flex"
          v-for="(item2, index2) in item.values"
          :key="index2"
        >
          <CheckboxGroup v-model="item.selectData">
            <Checkbox :label="item2.valueName" disabled>
              <img
                :src="item2.valueImageKey"
                style="width: 20px; height: 15px; margin-top: 10px"
                v-if="item2.valueImageKey"
              />
            </Checkbox>
          </CheckboxGroup>
        </el-col>
      </el-row>
      <el-row
        class="mt10"
        v-if="formData.existingSkuList && formData.existingSkuList.length > 0"
      >
        <!-- <sku-table
          :columns="existingSkuColumns"
          :dataSource="formData.existingSkuList"
        /> -->
        <Table
          border
          height="500"
          :columns="existingSkuColumns"
          :data="formData.existingSkuList"
        />
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-row>
        <el-form ref="formData" :model="formData">
          <el-row>
            <el-col
              :span="12"
              v-for="(item, index) in formData.basicInfoList"
              :key="index"
            >
              <el-form-item :label="getBasicInfoLabel(item) + '：'">
                <span>{{
                  item.values ? item.selectData : item.valueInfo
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>管理属性基本信息</span>
      </div>
      <el-row>
        <el-form ref="formData" :model="formData" label-width="130px">
          <el-row>
            <el-col
              :span="12"
              v-for="(item, index) in formData.manageList"
              :key="index"
            >
              <el-form-item :label="item.attributeName + '：'">
                <span>{{
                  item.values ? item.selectData : item.valueInfo
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>营销信息</span>
      </div>
      <el-row>
        <el-form ref="formData" :model="formData">
          <el-row>
            <el-col
              :span="12"
              v-for="(item, index) in formData.marketingList"
              :key="index"
            >
              <el-form-item :label="item.attributeName + '：'">
                <span>{{
                  item.values ? item.selectData : item.valueInfo
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>税务信息</span>
      </div>
      <el-row>
        <el-form ref="formData" :model="formData">
          <el-row>
            <el-col
              :span="12"
              v-for="(item, index) in formData.taxList"
              :key="index"
            >
              <el-form-item :label="item.attributeName + '：'">
                <span>{{
                  item.values ? item.selectData : item.valueInfo
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>物流信息</span>
      </div>
      <el-row>
        <el-form ref="formData" :model="formData">
          <el-row>
            <el-col
              :span="12"
              v-for="(item, index) in formData.logisticsList"
              :key="index"
            >
              <el-form-item :label="item.attributeName + '：'">
                <span>{{
                  item.values ? item.selectData : item.valueInfo
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <!-- <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>商品适用场景</span>
      </div>
      <el-row style="display: flex">
        <el-col :span="8" :offset="1" disabled>
          <Tree ref="tree" :data="treeData" show-checkbox multiple></Tree>
        </el-col>
      </el-row>
    </el-card> -->
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>商品SKU信息</span>
      </div>
      <el-row
        v-if="formData.existingSkuList && formData.existingSkuList.length > 0"
        class="format_table_wrap"
      >
        <sku-table
          :columns="complexSKuColumns"
          :dataSource="formData.existingPackageList"
        />
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { jibenTreeDataUtilsNot } from '@/assets/js/commonUtils';
import descartes from '@/assets/js/dikaerji';
import util from '@/libs/util';
import SkuTable from '@/components/skusTable';
import { PACKAGE_TABLE_COLUMNS } from '@/pages/commodity/modules/constants/skuInfoModule/productManageView';
export default {
  components: {
    SkuTable
  },
  data () {
    return {
      showSpin: false,
      CityNames: '',
      treeData: [],
      complexSKuColumns: PACKAGE_TABLE_COLUMNS,
      existingSkuColumns: [
        {
          title: 'SKU编码',
          key: 'skuNo',
          width: 120
        },
        {
          title: 'SKU名称',
          key: 'skuName'
        },
        {
          title: '规格',
          key: 'specDetailStr'
        }
      ],
      formData: {},
      apiObj: {
        toSpuDetailStep1: {
          url: '/sysback/finish/spu/detail/toSpuDetailStep1',
          type: 'post'
        }
      }
    };
  },
  mounted () {
    this.initScroll();
  },
  created () {
    // this.getDefaultData();
  },
  // 营销信息监听,如果选中第三方平台,就获取第三方平台列表,让客户选择
  methods: {
    descartes,
    /**
     * 过滤字段方法
     * @sourceList 数据源
     * @attributeUuidKey 要过滤的字段名
    */
    filterAttrFunc ({ sourceList, attributeUuidKey }) {
      if (!sourceList) {
        return [];
      }
      return sourceList.reduce((value, item) => {
        if (item.attributeUuid !== attributeUuidKey) {
          value.push(item);
        }
        return value;
      }, []);
    },
    async getPageData () {
      if (this.formData.currentCategoryStr) {
        return;
      }
      let productUuid = util.Pub.getStorageSync('productUuidDetail');
      let data = {
        productUuid: productUuid
      };
      this.showSpin = true;
      let res = await ApiRequest(
        this.apiObj.toSpuDetailStep1.url + '?productUuid=' + productUuid,
        this.apiObj.toSpuDetailStep1.type,
        data
      );
      this.showSpin = false;
      if (res.retStatus === '1') {
        this.formData = res.retData;
        this.formData.manageList = this.filterAttrFunc({
          sourceList: res.retData.manageList,
          attributeUuidKey: 'manage_packlist'
        });
        this.formData.logisticsList = this.filterAttrFunc({
          sourceList: res.retData.logisticsList,
          attributeUuidKey: 'logistics_stock'
        });
        this.formData.existingPackageList.forEach((item) => {
          item.singleVolume = item.singleVolume;
          item.oneVolume = item.oneVolume;
          item.twoVolume = item.twoVolume;
          item.threeVolume = item.threeVolume;
        });
        this.formData.manageList = _.sortBy(
          this.formData.manageList,
          (item) => {
            return item.position;
          }
        );
        this.formData.specList.forEach((element) => {
          if (element.attributeType == '04') {
            element.selectData = [];
            element.values.forEach((item) => {
              if (item.selected) {
                element.selectData.push(item.valueName);
              }
            });
          }
        });
        this.formatTypeData(this.formData.basicInfoList)
        this.formatTypeData(this.formData.manageList)
        this.formatTypeData(this.formData.marketingList)
        this.formatTypeData(this.formData.logisticsList)
        this.formatTypeData(this.formData.taxList)
        this.treeData = jibenTreeDataUtilsNot(res.retData.sceneList);
      }
    },
    formatTypeData (data) {
      data.forEach((element) => {
        if (element.attributeType == '04') {
          element.selectData = [];
          element.values.forEach((item) => {
            if (item.selected) {
              element.selectData.push(item.valueName);
            }
          });
          if (element.selectData.length > 0) {
            element.selectData = element.selectData.join(',');
          } else {
            element.selectData = '';
          }
        } else if (element.attributeType == '03') {
          element.selectData = '';
          element.values.forEach((item) => {
            if (item.selected) {
              element.selectData = item.valueName;
            }
          });
        } else if (element.attributeType == '02') {
          element.selectData = '';
          element.values.forEach((item) => {
            if (item.selected && item.valueName !== null) {
              element.selectData = item.valueName;
            }
          });
        } else if (element.attributeType == '05') {
          element.selectData = element.valueInfo
        }
      });
    },
    initScroll () {
      let that = this;
      that.$router.afterEach((to, from, next) => {
        document
          .querySelector('body')
          .setAttribute('style', 'overflow: auto !important;');
        window.scrollTo(0, 0);
      });
      window.scrollTo(0, 0);
      document
        .querySelector('body')
        .setAttribute('style', 'overflow: auto !important;');
    },
    // 获取关键词别名信息
    getKeywordInfo () {
      return {
        keywordName: this.formData?.arch?.keywordInfo?.keywordName || '',
        aliasInfoList: this.formData?.arch?.keywordInfo?.aliasInfoList || []
      }
    },
    // 获取基本信息label名
    getBasicInfoLabel (item) {
      const isCustom = item.officialFlag == 'N' // 当前属性为自定义
      if (isCustom) return `（自定义）${item.attributeName}`
      return item.attributeName
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-form-item {
  margin-bottom: 5px;
}
.header-title {
  a {
    color: #000000;
    font-size: 16px;
  }
  .goods-title {
    margin-right: 10px;
  }
}
.card-title {
  font-size: 16px;
  color: #17233d;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  margin-top: -16px;
  border-bottom: 1px solid hsl(210, 10%, 92%);
}
.font_style {
  color: #666666;
  margin-right: 20px;
  width: auto;
}
.p_style {
  color: #ff0000;
  margin-top: 5px;
  margin-right: 5px;
  width: auto;
}
.sec-title {
  color: #666666;
  margin-right: 10px;
  margin-left: 20px;
}
.box-card {
  margin-bottom: 10px;
}
.mt10 {
  margin-top: 10px;
}
.keyword_ul_wrap {
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
